<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单校验</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>

<body>
    <!-- 
        表单校验：当用户填写完输入向后，需要判断用户输入的内容是否满足要求
        required：代表必填项，如果不填，提交会有提示
        .is-valid  ：通过校验规则
        .is-invalid:没有通过校验规则
        valid-feedback :通过校验规则后的提示信息
        invalid-feedback：没有通过校验规则的提示信息
     -->

    <form  >
        <div class="form-row">
            <div class="col-md-4 mb-3">
                <label for="validationCustom01">用户名</label>
                <input type="text" class="form-control is-valid" id="validationCustom01" placeholder="请输入用户名" value=""required>
                <div class="valid-feedback">
                    满足要求
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <label for="validationCustom02">密码</label>
                <input type="password" class="form-control is-invalid" id="validationCustom02" placeholder="Last name" value="Otto"
                    required>
                <div class="invalid-feedback">
                    密码输入不符合要求
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <label for="validationCustomUsername">Username</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupPrepend">@</span>
                    </div>
                    <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username"
                        aria-describedby="inputGroupPrepend" required>
                    <div class="invalid-feedback">
                        Please choose a username.
                    </div>
                </div>
            </div>
        </div>
        <div class="form-row">
            <div class="col-md-6 mb-3">
                <label for="validationCustom03">City</label>
                <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
                <div class="invalid-feedback">
                    Please provide a valid city.
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <label for="validationCustom04">State</label>
                <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
                <div class="invalid-feedback">
                    Please provide a valid state.
                </div>
            </div>
            <div class="col-md-3 mb-3">
                <label for="validationCustom05">Zip</label>
                <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
                <div class="invalid-feedback">
                    Please provide a valid zip.
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                <label class="form-check-label" for="invalidCheck">
                    Agree to terms and conditions
                </label>
                <div class="invalid-feedback">
                    You must agree before submitting.
                </div>
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit form</button>
    </form>

</body>

</html>